<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>学员管理</title>
<link rel="stylesheet" type="text/css"
	href="/ExamOnline/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="/ExamOnline/easyui/themes/icon.css">
<script type="text/javascript" src="/ExamOnline/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="/ExamOnline/easyui/jquery.easyui.min.js"></script>
	<style type="text/css">
img {
	max-height: 500px;
	max-width: 500px; /*图片自适应宽度*/
}
</style>
</head>

<body>
	<table id="dg" width="100%"  style="min-height:500px;"></table>
	<div id="showquestion" class="easyui-window" title="查看详情"
		data-options="modal:true,closed:true,iconCls:'icon-save',top:10"
		style="width:80%;padding:5px;">
		<table>
			<tr><td >题目：</td><td><div id="qtitle"></div></td></tr>
			<tr><td>选项A：</td><td><div id="optiona"></div></td></tr>
			<tr><td>选项B：</td><td><div id="optionb"></div></td></tr>
			<tr><td>选项C：</td><td><div id="optionc"></div></td></tr>
			<tr><td>选项D：</td><td><div id="optiond"></div></td></tr>
		</table>
	</div>
	<div id="tb" style="padding:5px;height:auto">
		<!-- <div style="margin-bottom:5px">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
		</div> -->
		<div>
		<form method="post" id="ff">
			题目: <input class="easyui-textbox" name="qtitle" style="width:150px">
			关键字: <input class="easyui-textbox" name="keyword" style="width:100px">
			创建时间：<input class="easyui-datebox" name="begintime"style="width:90px">
			To: <input class="easyui-datebox" name="endtime"style="width:90px">
			阶段: 
				<select name="stageid" class="easyui-combobox" panelHeight="auto">
					<option value="">请选择</option>
					<option value="1">一阶段</option>
					<option value="2">二阶段</option>
					<option value="3">三阶段</option>
					<option value="4">四阶段</option>
				</select>
			分类: 
			<select class="easyui-combobox" name="qtype" panelHeight="auto">
				<option value="">请选择</option>
				<option value="1">单选题</option>
				<option value="2">多选题</option>
			</select>
			<a class="easyui-linkbutton" iconCls="icon-search"  href="javascript:searchform()">查询</a>
			</form>
		</div>
	</div>
</body>
<script>
//将表单序列化
function serializeObject(form){
        var o={};
        $.each(form.serializeArray(),function(index){
                  if(o[this['name'] ]){
                       o[this['name'] ] = o[this['name'] ] + "," + this['value'];
                   }else{
                      o[this['name'] ]=this['value'];
                   }
            })
          return o;
   }    
	function searchform(){
		$('#dg').datagrid('load',serializeObject($("#ff").form()));
	}
	$("#dg").datagrid({
		url : '/ExamOnline/question/list',
		rownumbers : 'true',
		pagination : 'true',//pagination将发送两个参数到服务器：page：页码，起始值 1。rows：每页显示行。
		pageSize : 5,//每页显示的记录条数，默认为10 ,不可单独设置该属性，要与pageList一起设置。
		pageList : [ 5, 10, 15 ],//可以设置每页记录条数的列表 
		autoRowHeight : 'false',
		method : 'post',
		toolbar : '#tb',
		loadMsg : '正在加载',
		fitColumns : 'true',
		nowrap:'false',
		singleSelect : 'true',
		columns : [ [ {
			field : 'qtitle',
			title : '题目',
			width : 450,
			formatter:function(value,row,index){
				return "<div style='height:40px;'>"+value+"</div>"
			}
		}, {
			field : 'qtype',
			title : '分类',
			width : 30,
			formatter:function(value,row,index){
				if(value==1){
					return "单选题";
				}else if(value==2){
					return "多选题";
				}
			}
		}, {
			field : 'stageid',
			title : '阶段',
			align : 'center',
			width : 30,
			formatter : function(value, row, index) {
				if (value == 1) {
					return "一阶段";
				} else if (value == 2) {
					return "二阶段";
				} else if (value == 3) {
					return "三阶段";
				} else if (value == 4) {
					return "四阶段";
				}
			}
		}, {
			field : 'createtime',
			title : '创建时间',
			align : 'center',
			width : 75,
			formatter : function(value, row, index) {
				var localtime = new Date(value);
				
				return localtime.toLocaleString();
			}
		}, {
			field : 'test',
			title : '操作',
			align : 'center',
			formatter : formatOper
		} ] ]

	});
	
	function formatOper(val, row, index) {
		return '<a href="#" onclick="showValue(' + index
				+ ')">查看</a>&nbsp;<a href="#" onclick="editpanel(' + row.qid
				+ ')">修改</a>&nbsp;<a href="#" onclick="delValue('+row.qid+')">删除</a>';
	}
	function showValue(index) {
		var row = $("#dg").datagrid("getRows")[index];
		$("#qtitle").html(row.qtitle);
		$("#optiona").html(row.optiona);
		$("#optionb").html(row.optionb);
		$("#optionc").html(row.optionc);
		$("#optiond").html(row.optiond);
		$('#showquestion').window('open');
	}
	function delValue(id){
		$.messager.confirm('消息提示', '您确定要删除吗？', function(r) {
			if (r) {
				$.post("/ExamOnline/question/delete", "id=" + id, function(r) {
					$.messager.alert('消息提示', r);
					$("#dg").datagrid('reload');
				});
			}
		});
		
	}
	function editpanel(id){
		var jq = top.jQuery;
		var title = "修改试题";
		var url ="question/edit.html";
		if (jq("#tabs").tabs('exists', title)){
			jq("#tabs").tabs('select', title);
		} else {
			var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
			jq("#tabs").tabs('add',{
				id:id,
				title:title,
				content:content,
				closable:true
			});
		}
	}
</script>

</html>